.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  box-sizing: content-box;
  padding: 0 30px;
  width: calc(100% - 60px);
  padding-bottom: var(--safe-bottom);
  background-color: var(--color-caption);
  display: flex;
  align-items: center; 
  &.shadow {
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
  }
  &.pad {
    padding-top: 20px;
    padding-bottom: max(20px, var(--safe-bottom));
  }
  .transparent {
    background-color: transparent;
  }
  &+.end{
    box-sizing: content-box;
    height: 100px;
    padding-bottom: var(--safe-bottom);
  }
  &.pad+.end{
    height: 100px;
    padding-top: 20px;
    padding-bottom: max(20px, var(--safe-bottom));
  }
}
